<template>
  <div class='container'>
    <div class="box">
      <el-button @click="ffn">Default</el-button>
      <el-button type="primary">Primary</el-button>
      {{state.flag}}
    </div>
    <teleport to="body">
      <vv-blg v-if="state.flag" @goFun="goFun"></vv-blg>
    </teleport>
  </div>
</template>
<script setup>

import { reactive, onMounted, watch, getCurrentInstance, inject } from 'vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { getList } from '@/http/api/index'
import { useRequest } from 'vue-request';
import vvBlg from '@/components/vv-blg'
// const res = useRequest(getList, {
//   debounceInterval: 300,//防抖
//   loadingDelay: 8000, //loading 延迟时间
// });
// console.log(res);


const router = useRouter()
let { appContext } = getCurrentInstance()
let state = reactive({
  n: 'ooo',
  flag: false,
})

let goFun = (ee) => {
  state.flag = ee
}
let ffn = () => {
  console.log('sssssss', state.flag);
  state.flag = true
}

// let $axios = inject('$axios')
onMounted(() => {
  // // 1.------
  // appContext.config.globalProperties.$axios.get('https://unidemo.dcloud.net.cn/api/news')
  //   .then((res) => {
  //     console.log('----', res);
  //   })

  // //2.-------
  // $axios.get('https://unidemo.dcloud.net.cn/api/news')
  //   .then((res) => {
  //     console.log('----', res);
  //   })

  // //3.-------
  getList().then((res) => {
    console.log(res);
  })

  // //4.-------
  // let xhr = new XMLHttpRequest()
  // xhr.open('get', 'https://unidemo.dcloud.net.cn/api/news', true)
  // xhr.send()
  // xhr.onreadystatechange = function () {
  //   if (xhr.status == 200 && xhr.readyState == 4) {
  //     console.log('-----', xhr.responseText);
  //   }
  // }

  // //5.-------
  // fetch('https://unidemo.dcloud.net.cn/api/news')
  // .then(res => res.json())
  // .then((res) => { console.log(res); })
})

let color = '#999'
watch()
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
}

.box {
  width: 100%;
  min-height: 100px;
  background: v-bind(color);
}
</style>